Wepack有許多config可以設定在webpack.config.js裡面，今天要來介紹一些比較常用的內容！

entry

The entry point for the bundle.

簡單的說entry設定的是整個專案的入口點，也就是起始的檔案，它有三種設定方式，一開始有點容易混淆，以下分別針對這三種方式做說明:

(1) String
如果你傳入的是一個字串，例如：'./main.js'，表示一開始執行這隻檔案，把所有相依的程式碼都打包進bundle.js。

範例：

{
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
}

(2) Array
如果你傳入的是一個陣列，例如：['./main.js', './ga.js']，表示main.js並沒有使用到ga.js的code，彼此沒有相依性，但要共同打包進bundle.js，並且依照陣列設定順序，ga.js的code會放在最後面。

範例：

{
  entry: ['./main.js', './ga.js'],
  output: {
    filename: 'bundle.js'
  }
}

(3) Object
如果你傳入的是一個物件，表示你的web有許多頁面(入口點)，所以透過object設定方式，打包每個頁面相依的程式碼。filename會根據entry裡面的key name產生bundle後的檔案，如下面的範例，將會生成index.js、product.js、rule.js三個bundle的code。

範例：

{
  entry: {
    'index': './inde.js',
    'product': './product.js',
    'rule': './rule.js'
  },
  output: {
    filename: '[name].js'
  }
}

傳入object的方式，每一個key對應的value也可以是string或是array，bundle的規則還是會跟上面描述三種一樣。如下面範例，會生成index.js和vender.js。

{
  entry: {
    'index': './main.js',
    'vender': ['./jquery.js', './ga.js']
  },
  output: {
    filename: '[name].js'
  }
}

output

Output是設定bundle完的程式碼要放在哪個路徑、檔名的部分，下面說明裡面的一些屬性。

output.filename

設定bundle後的檔名，如同前面entry提到，可以設定多組entry，可是只需要定義一個filename。多組entry的方式則是使用[name].js，也可以利用[hash]來設定bundle後的檔名，每次build都會生成一組hash，可以當成finger print來用。

範例：

output: {
  filename: '[name].[hash].js'
}

output.path

設定bundle後的路徑，這裡是寫相對路徑，而且跟檔名都是必須設定的值，以下範例bundle後檔案會生成在./dist/main.js。

範例：

output: {
  filename: 'main.js',
  // __dirname是node裡面表示相對路徑的寫法
  path: __dirname + '/dist/'
}

output.publicPath

這是指在程式裡面有require、inline使用到的URL(例如：圖片、CSS檔)，如果設些檔案在browser瀏覽時它的路徑會和發時不同，相對位置不同，則需要設定。如果相對位置不同，則需設定publicPath，bundle時會把相對路徑替換成publicPath設定的，可以是完整URL(例如 http://www.domain.com/)，也可以是另一個相對的路徑。

範例一：

// CSS裡面使用到的圖片
.img {
  background-image: url('./hello.jpg');
}

// webpack.config.js
output: {
  filename: 'main.js',
  path: __dirname + '/dist/',
  // 上面的CSS會變成 background-image: url('http://www.domain.com/hello.jpg');
  publicPath: 'http://www.domain.com/'
}

範例二：

// CSS裡面使用到的圖片
.img {
  background-image: url('./hello.jpg');
}

// webpack.config.js
output: {
  filename: 'main.js',
  path: __dirname + '/dist/',
  // 上面的CSS會變成 background-image: url('/assets/hello.jpg');
  publicPath: '/assets/'
}

module

Webpack會依module設定來打包，所以這邊也有幾個屬性可以使用。

module.loaders

前一篇有提到許多loaders的使用方式，這邊只做總結，就是不同靜態資源的loaders與相關設定，是一串陣列，每個陣列都是一組loader，裡面可以包含的屬性有幾個：

• test: 用正規表示法設定要load的檔案，通常設定要符合的副檔名。
• exclude: 用正規表示法或直接設定去除load的路徑(直接設定可以是字串，也可以是字串組成的陣列)，通常設定要去掉的路徑，如果可以使用include更有效率。
• include: 用正規表示法或直接設定要load的路徑(直接設定可以是字串，也可以是字串組成的陣列)，通常設定要符合的路徑。
• loader: loader本身，可以忽略'-loader'，也可以用!串接loader，會從最右邊的loader開始compile。
• loaders: 用陣列列出loaders。

module.preLoaders 和 module.postLoaders

寫法和module.loaders相同，不同的地方是pre和post loaders。

使用module.preLoaders的例子，假設我們希望可以使用eslint來調教code，那可以把eslint-loader放在module.preLoaders使用。

module: {
  preLoaders: [
    {
      test: /\.js$/,
      // 相當於 loader: 'eslint'
      loader: 'eslint-loader'
    }
  ]
}

使用module.postLoaders的例子，假設我們希望使用代碼覆蓋率測試，那可以把istanbul-instrumenter-loader放在module.postLoaders使用。
範例：

module: {
  postLoaders: [
    {
      test: /\.js$/,
      // 相當於 loader: 'istanbul-instrumenter'
      loader: 'istanbul-instrumenter-loader'
    }
  ]
}

resolve

這有點不知道如何解釋，算是可以幫助module設定的一些設定，讓我直接用裡面的屬性來說明...XD

resolve.alias

就是別名的意思，當有路徑很長的時候，可以設定alias，然後在require()時使用。

範例：

resolve: {
  alias: {
    // 當使用圖片時，可以設定 require('Images/test.png')
    Images: './src/assets/images',
    // require('Config') 就相當於 require('./config.js')
    Config: './config.js'
  }
}

resolve.extensions

可以設定已知的副檔名，所以使用時不用再寫一次。
範例：

resolve: {
  extensions: {
    // 可以省略副檔名 require('jQuery.js') 用 require('jQuery') 取代
    extensions: ['', '.js', '.jsx', 'json']
  }
}

plugins

設定許多附加功能的外掛，也是用array表示。
這部分，下一篇我會再介紹一下常用的plugins～～

參考

Webpack Configuration